import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Progress } from '@/components/ui/progress';
import { useVocabulary } from '@/contexts/VocabularyContext';
import { CheckCircle2, Circle } from 'lucide-react';

export default function AchievementTab() {
  const { achievements } = useVocabulary();

  const categoryNames = {
    words: '词汇成就',
    games: '游戏成就',
    streak: '连续学习',
    special: '特殊成就',
  };

  const categoryColors = {
    words: 'from-blue-500 to-cyan-500',
    games: 'from-purple-500 to-pink-500',
    streak: 'from-orange-500 to-red-500',
    special: 'from-yellow-500 to-amber-500',
  };

  const groupedAchievements = achievements.reduce((acc, achievement) => {
    if (!acc[achievement.category]) {
      acc[achievement.category] = [];
    }
    acc[achievement.category].push(achievement);
    return acc;
  }, {} as Record<string, typeof achievements>);

  const totalAchievements = achievements.length;
  const unlockedAchievements = achievements.filter(a => a.isUnlocked).length;
  const completionRate = Math.round((unlockedAchievements / totalAchievements) * 100);

  return (
    <div className="space-y-6">
      {/* 总体进度 */}
      <Card className="bg-gradient-to-r from-purple-500 to-pink-500 text-white border-0">
        <CardContent className="pt-6">
          <div className="text-center space-y-4">
            <div className="text-6xl">🏆</div>
            <div>
              <h2 className="text-3xl font-bold mb-2">成就进度</h2>
              <p className="text-lg opacity-90">
                已解锁 {unlockedAchievements} / {totalAchievements} 个成就
              </p>
            </div>
            <div className="max-w-md mx-auto space-y-2">
              <Progress value={completionRate} className="h-4 bg-white/30" />
              <p className="text-sm opacity-90">完成度：{completionRate}%</p>
            </div>
          </div>
        </CardContent>
      </Card>

      {/* 成就列表 */}
      {Object.entries(groupedAchievements).map(([category, categoryAchievements]) => (
        <div key={category} className="space-y-4">
          <div className="flex items-center gap-3">
            <div className={`h-1 flex-1 rounded-full bg-gradient-to-r ${categoryColors[category as keyof typeof categoryColors]}`} />
            <h3 className="text-xl font-bold text-gray-900">
              {categoryNames[category as keyof typeof categoryNames]}
            </h3>
            <div className={`h-1 flex-1 rounded-full bg-gradient-to-r ${categoryColors[category as keyof typeof categoryColors]}`} />
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            {categoryAchievements.map((achievement) => (
              <Card
                key={achievement.id}
                className={`transition-all duration-300 ${
                  achievement.isUnlocked
                    ? 'border-2 border-green-300 bg-gradient-to-br from-green-50 to-emerald-50 hover:shadow-lg'
                    : 'hover:shadow-md bg-white'
                }`}
              >
                <CardHeader className="pb-3">
                  <div className="flex items-start justify-between">
                    <div className="flex items-center gap-3">
                      <div className="text-4xl">{achievement.icon}</div>
                      <div>
                        <CardTitle className="text-lg flex items-center gap-2">
                          {achievement.title}
                          {achievement.isUnlocked && (
                            <CheckCircle2 className="h-5 w-5 text-green-600" />
                          )}
                        </CardTitle>
                        <CardDescription className="mt-1">
                          {achievement.description}
                        </CardDescription>
                      </div>
                    </div>
                  </div>
                </CardHeader>

                <CardContent className="space-y-2">
                  <div className="flex items-center justify-between text-sm">
                    <span className="text-gray-600">进度</span>
                    <span className={`font-semibold ${achievement.isUnlocked ? 'text-green-600' : 'text-gray-900'}`}>
                      {achievement.progress} / {achievement.maxProgress}
                    </span>
                  </div>
                  <Progress
                    value={(achievement.progress / achievement.maxProgress) * 100}
                    className={`h-2 ${achievement.isUnlocked ? 'bg-green-200' : ''}`}
                  />
                  
                  {achievement.isUnlocked && (
                    <div className="flex items-center gap-2 text-sm text-green-600 font-medium pt-1">
                      <CheckCircle2 className="h-4 w-4" />
                      <span>已解锁</span>
                    </div>
                  )}
                  
                  {!achievement.isUnlocked && (
                    <div className="flex items-center gap-2 text-sm text-gray-500 pt-1">
                      <Circle className="h-4 w-4" />
                      <span>未解锁</span>
                    </div>
                  )}
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      ))}

      {/* 激励信息 */}
      <Card className="bg-gradient-to-r from-yellow-50 to-orange-50 border-yellow-200">
        <CardContent className="pt-6">
          <div className="flex items-start gap-3">
            <div className="text-3xl">🌟</div>
            <div>
              <h3 className="font-semibold text-gray-900 mb-1">继续加油！</h3>
              <p className="text-sm text-gray-600">
                {unlockedAchievements === 0 && '开始你的学习之旅，解锁第一个成就吧！'}
                {unlockedAchievements > 0 && unlockedAchievements < totalAchievements / 2 && '你已经迈出了第一步，继续努力解锁更多成就！'}
                {unlockedAchievements >= totalAchievements / 2 && unlockedAchievements < totalAchievements && '你已经解锁了一半以上的成就，太棒了！'}
                {unlockedAchievements === totalAchievements && '恭喜你！你已经解锁了所有成就，你是真正的词汇大师！'}
              </p>
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}
